<template>
    <el-dialog title="目录打印" :visible.sync="open" append-to-body :before-close="closeDelDialog">
        <div class="printMain">
            <el-select v-model="value" multiple collapse-tags value-key="FIELD_NAME" placeholder="请选择指定展示打印数据"
                @change="insuranceNameSelect" @remove-tag="removeTagSelect">
                <el-option v-for="item in tableHeaderList" :key="item.FIELD_NAME" :label="item.FIELD_CAPTION" :value="item">
                </el-option>
            </el-select>
            <div style="margin-left:20px">
                <el-button type="danger" plain size="medium" @click="printTap">打印</el-button>
                <el-button @click="closeDelDialog">取 消</el-button>
            </div>

        </div>


        <el-table class="custom-table" :data="printList" border style="width:100%;margin-top:20px;" :height="height"
            ref="reftable">
            <el-table-column v-for="(col, index) in valueListSelected" :key="index" :prop="col.FIELD_NAME"
                :label="col.FIELD_CAPTION" align="center" header-align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row[col.FIELD_NAME] ? scope.row[col.FIELD_NAME] : '' }}
                </template>
            </el-table-column>
        </el-table>

    </el-dialog>
</template>
<script>
export default {
    props: ['open', 'tableHeaderList', 'printList'],
    watch: {
        tableHeaderList: {
            handler(varNew) {
                console.log(varNew)
                this.valueListSelected = varNew;
                this.value = varNew;
            },
            immediate: true
        }
    },
    data() {
        return {
            height: "600px",
            value: "",
            valueListSelected: [],

        }
    },
    updated() {
        this.$refs["reftable"].doLayout();
    },
    methods: {
        // 表头部重新渲染
        renderHeader(h, { column, $index }) {
            // 新建一个 span
            let span = document.createElement('span');
            // 设置表头名称
            span.innerText = column.label;
            // 临时插入 document
            document.body.appendChild(span);
            // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
            column.minWidth = span.getBoundingClientRect().width + 20;
            // 移除 document 中临时的 span
            document.body.removeChild(span);

            // var element = document.querySelector('.el-table__body-wrapper'); 
            // element.style.height = this.tableHeight - 52 + "px"

            return h('span', column.label);
        },

        //关闭
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },

        insuranceNameSelect(val) {
            console.log(val, '==========险种选中==========');
            // this.valueListSelected = [];
            // for (let i = 0; i < val.length; i++) {
            //     this.tableHeaderList.find(item => { //这里的options就是数据源
            //         if (item.FIELD_NAME == val[i]) {
            //             this.valueListSelected.push({ FIELD_NAME: item.FIELD_NAME, FIELD_CAPTION: item.FIELD_CAPTION })
            //         }
            //     })
            // }
            this.valueListSelected = val;
            // console.log(this.valueListSelected, '==========valueListSelected===========');
        },
        removeTagSelect(tag) {
            console.log(tag, "=========tag=========");
        },


        //打印
        printTap() {
            const tableElement = document.querySelector('.custom-table');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;
            iframeDoc.write(`
          <html>
          <head>
            <style>
              @media print {
                .elTable{width:1%;}
            /* 表格边框 */
            table {
            border-collapse: collapse;
            border: 1px solid black;
            }
            /* 表格内容边框 */
            td, th {
            border: 1px solid black;
            text-align: center; /* 设置单元格文本居中 */
            border-collapse: collapse; /* 合并单元格边框 */
            height:40px;
            line-height:40px
            }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
            iframeDoc.close();
        },


    }
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-dialog {
//     margin: 30px auto 0 !important;
// }
::v-deep .el-dialog__body {
    padding: 0 20px 10px !important;
}

.printMain {
    display: flex;
    flex-direction: row;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.elTable {
    width: 80%;
}
</style>